<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Learn from the css3实现的switch开关按钮 by 愚人码头">
	<meta name="keywords" content="">
	<meta name="author" content="">
	<title>CSS-Switch-iOS</title>

	<link type="text/css" href="switch.css" rel="stylesheet">
	<link type="text/css" href="prettify.css" rel="stylesheet">
	<style>
		h3
		{
			margin: 10px 0 10px 0;
			font-size: 20px;
		}
		body
		{
			padding: 10px;
			font-size: 12px;
		}
		.example-con
		{
			/*margin-top: 30px;*/
		}
		.switch-ios-con
		{
			margin-top: 10px;
			font-size: 16px;
		}
		.switch-ios-con label
		{
			display: inline-block;
		}
		fieldset, legend
		{
			padding: 0;
			margin: 0;
			border: 0 none;
			border-collapse: collapse;
		}
		label, input, select
		{
			vertical-align: middle;
		}
	</style>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script>
		function htmlEncode(value)
		{
			return $('<div/>').text(value).html();
		}
		function appendPreHtmlCode(itemIndex, itemHtml, $tagObject)
		{
			// Replace the blank lines for the string with blank line head;
			itemHtml = itemHtml.replace(/(\n+)\s/, " ");
			// Replace the blank lines between lines;
			itemHtml = itemHtml.replace(/\n(\n+)\s/g, "\n ");
			// Regexp for space before words in the first line of one string;
			var spaceMatchArray = itemHtml.match(/^(\s*)./g);
			if (spaceMatchArray)
			{
				var matchContent = spaceMatchArray[0];
				var spacePrefixLength = itemHtml.indexOf(matchContent[matchContent.length - 1]);
				// 1.Replace the common space prefix ;
				// 2.Replace the fore and end blank characters
				var preSpace = itemHtml.replace(eval('/\\n(\\s){' + spacePrefixLength + '}/g'), '\n')
						.replace(/(^\s*)|(\s*$)/g, "");
				if (itemIndex > 0 || $tagObject.html().length > 0)
				{
					// Add wrap and blank line between className contents in <tagName></tagName>;
					$tagObject.append('\n\n');
				}
				$tagObject.append(htmlEncode(preSpace));
			}
		}
		function addClassContentToTagContent(className, tagName)
		{
			$(tagName).each(function (index, data)
			{
				var $tagObject = $(data);
				// Pretreatment <tagName> inner html content: Remove the blank/space of <tagName</tagName> inner content;
				var tagObjectHtml = $tagObject.html();
				var searchRegex = /\s+/g;
				var spaceMatchResult = tagObjectHtml.match(searchRegex);
				if (spaceMatchResult && spaceMatchResult[0].length == tagObjectHtml.length)
				{
					tagObjectHtml = tagObjectHtml.replace(searchRegex, "");
				}
				if ($tagObject.html().length > 0)
				{
					$tagObject.empty();
					appendPreHtmlCode(0, tagObjectHtml, $tagObject);
				}
				// Find and add className to <tagName></tagName>
				var classChildren = $tagObject.parent().find('.' + className);
				classChildren.each(function (itemIndex, itemData)
				{
					appendPreHtmlCode(itemIndex, $(itemData).html(), $tagObject);
				});
			});
		}
		function convertCode()
		{
			var content = $('#input-content').val()
					.replace(/(^\s*)/g, "'")
					.replace(/(\s*$)/g, "'")
					.replace(/(\n+)\s*/g, "'+\n'").replace("''", "'");
			console.log(content);
		}

	</script>
	<script type="text/javascript" src="prettify.js"></script>
</head>
<body onload="addClassContentToTagContent('print-code','pre');prettyPrint();">

<div class="example-con">
	<h3>默认</h3>

	<div class="mui-tab-con clearfix">
		<form class="mui-form" name="" method="post" action="#">
			<fieldset>
				<legend>表单标题</legend>
				<div class="switch-ios-con print-code">
					<label><input class="switch-ios" type="checkbox"> 默认未选中</label>
				</div>
				<div class="switch-ios-con print-code">
					<label><input class="switch-ios" type="checkbox" checked=""> 默认选中</label>

					<div id="feed-control">
						<div class="control-item control-play play-pause"></div>
						<div class="control-item control-next"></div>
						<div class="control-item control-reset"></div>
						<div class="control-item"></div>
				</div>
				</div>
			</fieldset>
		</form>
	</div>
	<pre class="prettyprint lang-html linenums:1">
	</pre>
</div>
<div class="example-con">
	<h3>简单的背景过渡效果 switch</h3>

	<p>加 switch-ios-animbg 类即可</p>

	<div class="mui-tab-con clearfix">
		<form class="mui-form" name="" method="post" action="#">
			<fieldset>
				<legend>表单标题</legend>
				<div class="switch-ios-con print-code">
					<label><input class="switch-ios switch-ios-animbg" type="checkbox"> 默认未选中</label>
				</div>
				<div class="switch-ios-con print-code">
					<label><input class="switch-ios switch-ios-animbg" type="checkbox" checked=""> 默认选中</label>
				</div>
			</fieldset>
		</form>
	</div>
	<pre class="prettyprint lang-html linenums:1"></pre>
</div>
<div class="example-con">
	<h3>过渡效果的switch</h3>

	<p>加 switch-ios-anim 类即可</p>

	<div class="mui-tab-con clearfix">
		<form class="mui-form" name="" method="post" action="#" id="">
			<fieldset>
				<legend>表单标题</legend>
				<div class="switch-ios-con print-code">
					<label><input class="switch-ios switch-ios-anim" type="checkbox"> 默认未选中</label>
				</div>
				<div class="switch-ios-con print-code">
					<label><input class="switch-ios switch-ios-anim" type="checkbox" checked=""> 默认选中</label>
				</div>

			</fieldset>
		</form>
	</div>
	<pre class="prettyprint lang-html linenums:1"></pre>
</div>
</body>
</html>